import { Directive, Input, ElementRef } from '@angular/core';
import { timer } from 'rxjs';

@Directive({
    selector: '*[appAnimate]',
    exportAs: 'appAnimate'
})
export class AnimateCssDirective {

    @Input() appAnimate: string;
    @Input() timer = 1000;

    constructor(
        private elementRef: ElementRef,
    ) { }

    showAnimate() {
        const targetDom: HTMLElement = this.elementRef.nativeElement;
        targetDom.classList.add('animated', this.appAnimate);
        timer(this.timer).subscribe(() => targetDom.classList.remove('animated', this.appAnimate));
    }
}
